import React, { PureComponent } from "react";
import { Layout, Content } from "@react/layout"; 
import { add, detory } from "@store";
import { addList, updateList, removeList } from "@project/todo/business/data";

import TodoHeader from "./header";
import TodoItem from "./item";
import EmptyMessage from "./empty";

import "@static/reset.less";
import "@static/todo/index.less";
export default class TodoList extends PureComponent {

    state = {
        lists:[]
    }

    id = "todo";

    componentDidMount(){
        const id = this.id;
        add(id, 'addList', item => {
            let { lists = [] } = this.state;
            lists = addList(lists, item);
            this.setState({
                lists
            })
        })

        add(id, 'updateList', data => {
            let { lists = [] } = this.state;
            this.setState({
                lists: updateList(lists, data)
            })
        })

        add(id, 'removeList', data => {
            let { lists = [] } = this.state;
            this.setState({
                lists: removeList(lists, data)
            })
        })

    }

    componentWillUnmount(){
        const id = this.id;
        detory(id);
    }

    render(){
        const { lists } = this.state;
        console.log('Todo List => ', lists)
        return <Layout style={{height: "100%", background: "transparent"}}>
            <TodoHeader pid={this.id} />
            <Layout className="c-layout-has-sider" style={{background: "transparent"}}>
                <Layout style={{padding: 0, margin: 0, minHeight: 280, background: "transparent"}}>
                    <Content style={{ background: "transparent"}}>
                        <div className="box-container">
                            {
                                lists.length ? lists.map(e => {
                                    const { uuid } = e;
                                    return <TodoItem key={e} uuid={uuid} pid={this.id} />
                                }) : <EmptyMessage />
                            }
                        </div>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    }
}
